<!-- <template></template>
<button id="red" />
<button id="bold" />
<input id="quill" />
<script setup>
class quill {
  constructor() {
    this.operates = [];
    this.inputHTML = "";
  }
  // data {style:"color:blue",content:"12345"}
  insert(data) {
    this.operates.push(["insert", data]);
  }
  // section [start,end]
  delete(section) {
    this.operates.push(["delete", section]);
  }
  // method {style:"color:red",section:[start,end]}
  update(method) {
    this.operates.push(["update", method]);
  }
  listener() {
    //对鼠标，回车，以及按钮监听，然后根据监听到的内容调用insert,delete,update，然后调用render函数
  }
  render() {
    const quillEditor = document.querySelector("#quill");
    quillEditor.textContent = "";
    this.operates.forEach((operate) => {
      if (operate[0] === "insert") {
        this.inputHTML += `<p style=${operate[1]["style"]}>${operate[1]["content"]}</p>`;
      } else if (operate[0] === "delete") {
        this.inputHTML.replace(this.inputHTML.slice(...operate[1]), "");
      } else if (operate[0] === "update") {
        this.inputHTML.replace(
          this.inputHTML.slice(...operate[1]),
          `<p style=${operate[1]["style"]}>${this.inputHTML.slice(
            ...operate[1]
          )}</p>`
        );
      }
    });
    quillEditor.innerHTML = this.inputHTML;
  }
}
</script>

<style scoped></style> -->
<template>
  <input id="quill" contenteditable="true"/>
  <button id="red">Red</button>
  <button id="bold">Bold</button>
</template>

<script setup>
import { onMounted } from "vue";
class Quill {
  constructor() {
    this.editor = document.querySelector("#quill");
    this.content = [];
    this.ops = [];
    this.bindEvents();
  }

  bindEvents() {
    // 文本输入监听（简易版）
    this.editor.addEventListener("input", () => {
      const text = this.editor.innerText;
      this.insert(text);
    });

    // 样式按钮
    document.querySelector("#red").addEventListener("click", () => {
      this.formatCurrentSelection({ color: "red" });
    });

    document.querySelector("#bold").addEventListener("click", () => {
      this.formatCurrentSelection({ fontWeight: "bold" });
    });
  }

  insert(text) {
    this.content.push({ text, styles: {} });
    this.render();
  }

  formatCurrentSelection(styles) {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      const start = this.getTextPosition(range.startContainer);
      const end = this.getTextPosition(range.endContainer);
      this.format(start, end - start, styles);
    }
  }

  getTextPosition(node) {
    // 简化：假设所有文本在 content 数组中
    return this.content.reduce((pos, block) => pos + block.text.length, 0);
  }

  format(start, length, styles) {
    // 实际应拆分文本块处理
    this.content.forEach((block) => {
      block.styles = { ...block.styles, ...styles };
    });
    this.render();
  }

  render() {
    this.editor.innerHTML = this.content
      .map(
        (block) =>
          `<span style="${this.css(block.styles)}">${block.text}</span>`
      )
      .join("");
  }

  css(styles) {
    return Object.entries(styles)
      .map(([k, v]) => `${k}:${v}`)
      .join(";");
  }
}
onMounted(() => {
  new Quill();
});
</script>
